import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Picker, Field, Uploader,Toast } from 'react-vant';
import { Arrow,Passed } from '@react-vant/icons'
import { sleep } from 'antd-mobile/es/utils/sleep'
import HeaderNav from '../../../../components/ayq/HeaderNav'
import './index.less'

export default function Feedback() {
  const columns = [
    '产品体验',
    '产品功能',
    '其他问题'
  ]
  const [type, settype] = useState('选择反馈类型')
  const [content, setContent] = useState('')
  const [contm, setcontm] = useState('')

  // 创建校验规则
  const rules = {
    type: [
      { max: 4, message: '请选择反馈类型哦~' }
    ],
    content: [
      { required: true, message: '请输入反馈信息哦~' }
    ],
    contm: [
      { required: true, message: '请输入您的联系方式哦~' },
      { pattern: /^1[3-9]\d{9}$/, message: '联系方式格式不正确哦~' }
    ]
  };

  const upload = async (file) => {
    const body = new FormData()
    body.append('file',file)
    const resp = await axios.post('http://localhost:3000/uploadImg',body)
    let img = resp.data.path
    console.log(img,22222222222)
    return false
  }

  const addfeed = async ()=>{
    let errors = {};
    // 校验用户名字段
    if (type==='选择反馈类型') {
      errors.type = rules.type[0].message;
    }
    // 校验密码字段
    if (!content) {
      errors.content = rules.content[0].message;
    }
    // 校验密码字段
    if (!contm) {
      errors.contm = rules.contm[0].message;
    } else if (!rules.contm[1].pattern.test(contm)) {
      errors.contm = rules.contm[1].message;
    }

    if (Object.keys(errors).length > 0) {
      // 校验不通过，显示错误提示
      Toast.fail(Object.values(errors)[0]);
    } else {
      // 校验通过，执行提交操作
      const {data} = await axios.post('http://localhost:3000/adfeedback',{type,content,contmanner:contm})
      if(data.code === 200){
        Toast({
          message: data.msg,
          icon: <Passed  />,
        })
        settype('选择反馈类型')
        setContent('')
        setcontm('')
      }
    }
    
  }
  return (
    <div className='feedback'>
      <HeaderNav title="意见反馈" />
      <div className='body'>
        <Picker
          popup={{
            round: true,
          }}
          value={type}
          title='选择类型'
          columns={columns}
          onConfirm={settype}
        >
          {(val, _, actions) => {
            return (
              <Field
              readOnly
              clickable
              value={val || ''}
              rightIcon={<Arrow />}
              onClick={() => actions.open()}
              error={rules.type[0].message}  // 显示错误信息
              style={{'--rv-field-input-error-text-color':'black'}}
              />
            )
          }}
        </Picker>
        <Field
          rows={5}
          autoSize
          type="textarea"
          placeholder="请输入反馈信息"
          value={content}
          onChange={setContent}
          maxLength={300}
          showWordLimit
          error={rules.content[0].message}  // 显示错误信息
        />
        <Field
          placeholder="手机/邮箱/QQ (选填)"
          value={contm}
          onChange={setcontm}
          error={rules.contm[0].message}  // 显示错误信息
          style={{'--rv-field-input-error-text-color':'black'}}
        />
        {/* <div className='imgzwf'>
          <p>上传图片(最多6张)</p>
          <Uploader
            accept='*'
            // maxCount={6}
            // onChange={v => console.log(v)}
            upload={upload}
          />
        </div> */}
      </div>
      <div className='address-btom'>
        <button onClick={()=>addfeed()}>提交</button>
      </div>
    </div>
  )
}
